<html>
  <body>
    <div class="container">
      <div class="block">
        <!-- <iframe
          src="../game/watermelon/web-mobile/index.html"
          style="width: 360px; height: 640px"
          id="game"
        > -->
        <iframe
          src="../game/gobang/web-mobile/index.html"
          style="width: 360px; height: 640px"
          id="game"
        >
          <!-- <iframe
          src="../game/fruit/web-mobile/index.html"
          style="width: 960px; height: 640px"
          id="game"
        > -->
        </iframe>
      </div>
      <div class="block">
        <div>
          <iframe
            src="../web-mobile/index.html"
            style="width: 360px; height: 640px"
            id="control"
          >
          </iframe>
        </div>
      </div>
    </div>
  </body>
  <script>
    function fireGameEvent(type, arg1, arg2) {
      var myFrame = document.getElementById("game").contentWindow;
      let win = myFrame.window;
      let em = win.MY_EVENT_MANAGER;
      em.emit(type, arg1, arg2);
    }
  </script>
  <style type="text/css">
    .container {
      display: flex;
      flex-direction: row;
    }

    .block {
      margin: 10px;
    }
  </style>
</html>
